initEditor()

/************************** 获取真实分类，并渲染 *****************************/
$.ajax({
    url: '/my/category/list',
    success: function (res) {
        if (res.status === 0) {
            let str = '';
            res.data.forEach(item => {
                str += `<option value="${item.id}">${item.name}</option>`;
            });
            $('#category').append(str);
            // 更新渲染
            let form = layui.form;
            form.render('select');
        }
    }
});

// ---------------  创建剪裁区 ------------------
// - 找到剪裁区的图片 （img#image）
let $image = $('#image');
// - 设置配置项
let option = {
    // 纵横比(宽高比)
    aspectRatio: 400 / 280, // 正方形
    // 指定预览区域
    preview: '.img-preview' // 指定预览区的类名（选择器）
};
// - 调用cropper方法，创建剪裁区
$image.cropper(option);


$('#file').on('change', function () {
    let fileObj = this.files[0]
    let url = URL.createObjectURL(fileObj)
    $image.cropper('replace', url)
})


// --------------- 2. 点击选择头像，能够实现选择图片 --------------------
$('button:contains("选择封面")').on('click', function () {
    $('#file').trigger('click');
})


//------------最后的添加----------------
$('form').on('submit', function (e) {
    e.preventDefault()

    let fd = new FormData(this)

    fd.set('content', tinyMCE.activeEditor.getContent())

    // 2. 剪裁图片，转成 blob 形参（二进制形式或文件对象形式），追加到fd中
    let canvas = $image.cropper('getCroppedCanvas', {
        width: 400,
        height: 280
    });

    // 把canvas图片转成二进制形式
    canvas.toBlob(function (blob) {
        // 追加文件对象到fd中
        fd.append('cover_img', blob);

        // 检查一下，fd对象中，是否取得了接口要求的所有参赛
        // fd.forEach((val, key) => {
        //     console.log(key, val);
        // });
        // return;
        // 发送ajax请求，完成最终的添加
        $.ajax({
            type: 'POST',
            url: '/my/article/add',
            data: fd,
            success: function (res) {

                if (res.status === 0) {
                    layer.msg(res.message);
                    // 添加成功，跳转到 文章列表 页面
                    location.href = './list.html'
                }
            },
            processData: false, // 不要处理数据；意思是不要把对象形式的fd转换成查询字符串形式
            contentType: false // 不要加默认的请求头（application/x-www-form-urlencoded），让浏览器自行设置请求头
        });
    });
})